<template>
  <van-tabbar v-model="oActive" class="tabbar" active-color="#dfc059" @change="listChange">
    <van-tabbar-item replace :to="item.to" v-for="(item,index) in routeList" :key="index">
      <span>{{ item.name }}</span>
      <template #icon="props">
        <!-- {{ props }} -->
        <van-icon class-prefix="iconfont" :class="item.icon" size="1.25rem" :color="props.active ? iconColor.activeColor : iconColor.color" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
<script setup>
  import { ref, watch } from 'vue'
  const props = defineProps({
    routeActive: {
      required: true,
      type: Number,
      default: 0
    }
  })

  let oActive = ref(0)
  const routeList = ref([
    {
      name: '首页',
      to: '/h5_home',
      icon: 'icon-shouye'
    },
    {
      name: '我的单据',
      to: '/h5_reimbursement',
      icon: 'icon-Bdandanju'
    },
    // {
    //   name: '我的报表',
    //   to: '/h5_loanDetails',
    //   icon: 'icon-fl-baobiao'
    // },
    {
      name: '我的',
      to: '/h5_macenter',
      icon: 'icon-wode'
    },
  ])

  watch(() => props.routeActive, async val => {
    if(val) {
      oActive.value = val
    }
  },{immediate:true})

  let iconColor = ref({
    color: '#646566',
    activeColor: '#dfc059',
  })

  function listChange(val) {
    console.log('val-------------',val)
  }
</script>
<style scoped lang="scss">
// .tabbar {
//   position: absolute;
//   // bottom: .625rem;
//   bottom: 0;
//   left: 0;
// }

</style>

